<template>
 <div  class="weather">
  <div id="he-plugin-simple"></div>
 </div>
</template>

<script>
window.WIDGET = {
  CONFIG: {
    "modules": "012",
    "background": "5",
    "tmpColor": "FFFFFF",
    "tmpSize": "18",
    "cityColor": "FFFFFF",
    "citySize": "18",
    "aqiColor": "FFFFFF",
    "aqiSize": "18",
    "weatherIconSize": "26",
    "alertIconSize": "18",
    "padding": "10px 10px 13px 10px",
    "shadow": "0",
    "language": "auto",
    "fixed": "false",
    "vertical": "bottom",
    "horizontal": "left",
    "key": "7edd9043813349c5a52a0b0bebc5f6db"
  },
};
import { defineComponent,  onMounted } from "vue";
export default defineComponent({
  setup() {
    onMounted(() => {
      weather();
    });
    const weather = () => {
      const s = document.createElement("script");
      s.type = "text/javascript";
      s.src =
        "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
      document.body.appendChild(s);
    };

    return {};
  },
});
</script>

<style scoped>
.weather{
  width: 140px;
  /* height: 70px; */
float: left;
bottom: 0;
margin: 10px,10px,0,0;
z-index: 2;
margin-top: 10px;
}

</style>